{extend name="admin@public/basic" /}

{block name="style"}
<link rel="stylesheet" href="__STATIC__/css/admin/public.css" media="all"/>
{/block}

{block name="cotent"}
<form class="layui-form">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form">
            <input  type="hidden" id="app_sn" value="{$app_sn}"/>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input qrcode_no" placeholder="请输入主板码/设备码"/>
                </div>
                <a class="layui-btn search_btn" data-type="reload">搜索</a>
            </div>

            {if auth("$thisClass/add_qrcode")}
            <div class="layui-inline">
                <a class="layui-btn layui-btn-sm addNews_btn">生成二维码</a>
            </div>
            {/if}
            {if auth("$thisClass/download")}
           <!-- <div class="layui-inline">
                <a class="layui-btn layui-btn-sm layui-btn-green download">下载</a>
            </div>-->
            {/if}
            <div class="layui-inline">
                <a class="layui-btn layui-btn-sm layui-bg-cyan" onclick="exportQrcode()" >导出excel</a>
            </div>
        </form>
    </blockquote>
    <table id="userList" lay-filter="userList"></table>
    <script type="text/html" id="checkStatus">
        <input type="checkbox" name="{{d.id}}" value="{{d.status}}" lay-skin="switch" lay-text="绑定|未绑定" lay-filter="modifyStatus" {{ d.status== 1 ? 'checked' : '' }}>
    </script>

    <!--操作-->
    <script type="text/html" id="userListBar">

        <!--{if auth("$thisClass/edit_password")}-->
        <!--<a class="layui-btn layui-btn-sm layui-btn-green" lay-event="edit_password">修改密码</a>-->
        <!--{/if}-->

        {if auth("$thisClass/edit")}
        <a class="layui-btn layui-btn-sm layui-btn-warm" onclick='preview("{{d.image_url}}")' data-title="点击查看二维码大图">查看二维码</a>
        {/if}

       <!-- {if auth("$thisClass/del")}
        <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</a>
        {/if}
-->
        {{# if((d.status == 1)){ }}
        <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="unbind">解绑</a>
        {{# } }}
    </script>

</form>
{/block}

{block name="script"}
<script>
    layui.use(['laydate', 'form', 'layer', 'table', 'laytpl'], function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            laytpl = layui.laytpl,
            table = layui.table,
            laydate = layui.laydate;

        //日期范围
        laydate.render({
            elem: '#create_at'
            , range: true
        });

        //主板型号列表
        var api_host = "{$api_host}";
        var tableIns = table.render({
            elem: '#userList',
            url: api_host + 'Boss/Qrcode/getLists',
            method: 'POST',
            contentType: 'application/json; charset=UTF-8',
            headers: {
                "token": 'bbbbb'
            },
            where:{app_sn:$("#app_sn").val()},
            cellMinWidth: 95,
            page: true,
            height: "full-125",
            limits: [10, 15, 20, 25],
            limit: 20,
            id: "userListTable",
            request: {
                limitName: 'pageSize', //每页数据量的参数名，默认：limit
            },
            cols: [[
                {field: 'qrcode_no', title: '设备码', minWidth: 200, align: "center"},
                {field: 'device_no', title: '主板码', minWidth: 200, align: "center"},
                {field: 'status', title: '状态', minWidth: 100,align: "center",templet:function(d){if(d.status==1){return '已绑定'}else if(d.status==2){return '未绑定'}else{return '<div style="color:red">已解绑</div>'}}},
                {field: 'create_time', title: '添加时间', minWidth: 200, align: 'center'},
                {title: '操作', minWidth: 175, templet: '#userListBar', fixed: "right", align: "center"}
            ]]
        });

        //搜索【此功能需要后台配合，所以暂时没有动态效果演示】
        $(".search_btn").on("click", function () {

            if ($(".searchVal").val() != '') {
                //执行重载
                table.reload('userListTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        //传参数
                        qrcode_no: $(".qrcode_no").val(),
                        app_sn:$("#app_sn").val()

                    },

                });
                table.render();
                // layer.msg('查询成功');
            } else {
                layer.msg("请输入搜索的内容");
            }
        });

        //监听状态操作
        form.on('switch(modifyStatus)', function (obj) {
            var api_host = "{$api_host}";
            $.ajax({
                method: "POST",
                url: api_host + 'Boss/Mainboard/changeStatus',
                contentType: 'application/json; charset=UTF-8',
                header: {
                    'token': "bbbb", // 默认值
                },
                dataType:'json',
                data: JSON.stringify({mainboard_id:this.name}),
                success: (data) => {
                    if (data.code == 1) {
                        layer.msg(data.msg, {icon: 1});
                    } else {
                        layer.msg(data.msg, {icon: 2}, function () {
                            tableIns.reload();
                            layer.close();
                        });
                    }
                },
                error: () => {
                    layer.msg('系统错误，请稍后再试', {icon: 2}, function () {
                        tableIns.reload();
                    });
                }
            })
        });

        //列表操作
        table.on('tool(userList)', function (obj) {
            var layEvent = obj.event,
                data = obj.data;
            var api_host = "{$api_host}";
            if (layEvent === 'unbind') { //解绑
                layer.confirm('是否确认解绑设备？', {icon: 3, title: '提示信息'}, function (index) {
                    $.post(api_host + 'Boss/Qrcode/unBind', {id: data.id}, function (res) {
                        if (res.code == 1) {
                            layer.msg(res.msg, {icon: 1}, function () {
                                tableIns.reload();
                                layer.close(index);
                            });
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    },"json")

                });

            } else if (layEvent === 'del') { //删除
                layer.confirm('确定删除此主板？', {icon: 3, title: '提示信息'}, function (index) {
                    $.post(api_host + 'Boss/Mainboard/del', {mainboard_id: data.mainboard_id}, function (res) {
                        if (res.code == 1) {
                            layer.msg(res.msg, {icon: 1}, function () {
                                tableIns.reload();
                                layer.close(index);
                            });
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    },"json")

                });
            }
        });



    });


    $(".addNews_btn").click(function () {
        addUser();
    });

    // 添加
    function addUser(edit) {
        var index = layui.layer.open({
            title: "新增设备二维码",
            type: 2,
            content: '{:url("$thisClass/add_qrcode")}?app_sn='+$("#app_sn").val(),
            success: function (layero, index) {

                setTimeout(function () {
                    layui.layer.tips('点击此处返回列表', '.layui-layer-setwin .layui-layer-close', {
                        tips: 3
                    });
                }, 500)
            }
        });
        layui.layer.full(index);
        //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
        $(window).on("resize", function () {
            layui.layer.full(index);
        })
    }
    $(".download").click(function () {
        downLoad();
    });

    // 下载
    function downLoad(edit) {
       /* var index = layui.layer.open({
            title: "下载设备二维码",
            type: 2,
            content: '{:url("$thisClass/download")}',
            success: function (layero, index) {

                setTimeout(function () {
                    layui.layer.tips('点击此处返回列表', '.layui-layer-setwin .layui-layer-close', {
                        tips: 3
                    });
                }, 500)
            }
        });
        layui.layer.full(index);
        //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
        $(window).on("resize", function () {
            layui.layer.full(index);
        })*/
       var qrcode_no=$(".qrcode_no").val();
       window.location.href="{:url('admin/Equipment/download')}?qrcode_no="+qrcode_no;
    }

    function preview(src){
        console.log('src',src);
        //host = window.location.host;
        //protocol = window.location.protocol;
        //console.log(host,protocol,src);
        //src=protocol+"//"+host+src;
        layer.photos({ photos: {"data": [{"src": src}]} });
    }

    function exportQrcode(){
        var qrcode_no=$(".qrcode_no").val();
        var api_host = "{$api_host}";
        $.ajax({
            method: "POST",
            url: api_host + 'Boss/Qrcode/exportQrcode',
            contentType: 'application/json; charset=UTF-8',
            header: {
                'token': "bbbb", // 默认值
            },
            dataType:'json',
            data: JSON.stringify({qrcode_no:qrcode_no}),
            success: (data) => {
                if (data.code == 1) {
                    layer.msg(data.msg, {icon: 1});
                    window.location.href = api_host + data.data.url;
                    return false;
                } else {
                    layer.msg(data.msg, {icon: 2}, function () {
                        tableIns.reload();
                        layer.close();
                    });
                }
            },
            error: () => {
                layer.msg('系统错误，请稍后再试', {icon: 2}, function () {
                    tableIns.reload();
                });
            }
        })

    }

</script>
{/block}
